<template>
    <div>
        <h2>会员等级列表</h2>
        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>Id</td>
                    <td>会员等级名称</td>
                    <td>会员累计消费金额</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in data.list" :key="item.Id">
                    <td>{{item.Id}}</td>
                    <td>{{item.LevelName}}</td>
                    <td>{{item.Money}}</td>
                    <td>
                        <input type="button" value="修改" @click="upd(item.Id)" class="btn btn-primary" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
//ref reactive 实现响应式数据
//onMounted是生命周期钩子函数  相当于文档就绪函数
import {ref,reactive,onMounted} from 'vue';

//axios 实现网络请求的  相当于jquery中的ajax
import axios from 'axios'

//moment实现时间格式化
import moment from 'moment'

//router是路由器  是实现页面跳转并且传参
//route是理由信息对象  作用是用来接收参数
import {useRouter,useRoute} from 'vue-router'
const router=useRouter();
const route=useRoute();

//接收后端返回的数据
const data:any=reactive({
    list:[],
})

//生命周期函数
onMounted(()=>{
    getlist();
})

//修改跳转  后面的id是形参传来的
const upd=(id:any)=>{
    router.push({
        path:'/updmemberlist',
        query:{
            id:id,
        }
    })
}

//获取列表数据
const getlist=()=>{
    axios({
        url:'/api/Admin/GetMemberLevelList',
        method:'get',
    })
    .then(res=>{
        console.log(res);
        data.list=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}


</script>

<style scoped>

</style>